<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的小屋</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/layui.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/modules/code.css}" type="text/css"/>
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script charset="utf-8" th:src="@{/layui-v2.6.4/layui/layui.js}" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
    <style>
        body {
            height: 100%;
            background: linear-gradient(90deg, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB);
        }
    </style>
</head>
<body>


<div class="layui-fluid" style="height: 500px;width: 90%">
<div class="layui-row" style=" width: 100%;height: 100%; ">
<!--    <div class="layui-col-md12" style="text-align: center; margin: auto;font-size: 20px">
        <b>修改密码</b>
        <div style="width: 100%;height: 1px
            ;background:#E0E0E0;"></div>
    </div>-->
    <div class="layui-col-md10 layui-col-lg10 layui-col-sm10 layui-col-xs10 layui-row" style="height: 5px;"></div>
    <div class="layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row"style="height:1px; background:#E0E0E0;"></div>
    <br><br>
    <div class="layui-col-md6  layui-col-lg6 layui-col-sm6 layui-col-xs6 layui-col-md-offset4">
        <form id="form" class="layui-form" >
            <input type="hidden" name="hidden" id="hidden" th:value="${sysUser.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码:</label>
                <div class="layui-input-inline">
                    <input type="password" id="new" name="new" required lay-verify="required" placeholder="请输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认新密码:</label>
                <div class="layui-input-inline">
                    <input onblur="ob()" type="password" id="new1" name="new1" required lay-verify="required" placeholder="确认新密码"
                           autocomplete="off" class="layui-input"><span id="span" name="span"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input class="layui-btn layui-btn-primary" type="button" onclick="return commit()" value="确认修改">
                    <button  type="reset" class="layui-btn layui-btn-primary" style="background-color:red">忘记密码
                    </button>
                </div>
            </div>
        </form>
        <script>
            function ob(){
                var new1 = $("#new").val();
                var new2 = $("#new1").val();
                if(new1==new2){
                    $("#span").html('')
                }else {
                    $("#span").html('两次密码输入不一致')
                }
            }
            function commit(){
                if($("#new").val() != $("#new1").val()){
                    $("#span").html('两次密码输入不一致')
                    return false;
                }else{
                    $("#span").html('')
                }

                if($("#new1").val().length==0 || $("#new").val().length==0 || $("#old").val().length==0) {
                    layui.use(['layer', 'form'], function () {
                        var layer = layui.layer
                            , form = layui.form;
                        layer.msg('内容不能为空');
                        return false;
                    })
                }
                else{
                    aja()
                }
            }
            function aja(){
                $.ajax({
                    url: "/duibi"
                    , type: 'get'
                    , async: false
                    , data: {
                        id:$("#hidden").val()
                        , password: $("#old").val()
                        , password1: $("#new").val()
                    }
                    , success: function (aaa) {
                        if(aaa.length!=0){
                            layui.use(['layer', 'form'], function () {
                                var layer = layui.layer
                                    , form = layui.form;
                                layer.msg('密码错误');
                            })
                        }else {
                            layui.use(['layer', 'form'], function () {
                                var layer = layui.layer
                                    , form = layui.form;
                                layer.msg('修改成功');
                            })
                        }
                    }
                });
            }
        </script>
    </div>
</div>
</div>
</body>
</html>